<template>
  <div class="followvideo" >
  <my-header title="粉丝" hasLeft='true' @changeBack="toBack" />
  <div class="pause" @click="pause"></div>
  <div class="videos">
      <video-player class="video-player vjs-default-skin vjs-big-play-centered"
          ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
        ></video-player>
  </div>
  <div class="infobar_wrap">
    <info-bar></info-bar>
  </div>
  <div class="rightbar_wrap">
    <right-bar @changeCom="showComs"></right-bar>
  </div>
  <transition name="up">
  <div class="comment-wrap" v-if="showComment">
    <div class="comment-list">
      <div class="comment-top">
        <div class="number">15.0w条评论</div>
        <div class="close" @click="close">×</div>
      </div>
      <div class="comment-body">
        <div class="comment-box">
          <div class="comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源</p>
                <p class="reply-des">这是回复 <span class="time">05-20</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">520</p></div>
            </div>
          </div>
          <div class="sub-comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源源</p>
                <p class="reply-des">
                  <span>回复：</span>
                  <span class="re-name">源</span>
                  <span>这是回复回复的回复</span>
                  <span class="time">05-21</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">1314</p></div>
            </div>
          </div>
          <div class="more">-----展开60条回复</div>
          <div class="comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源</p>
                <p class="reply-des">这是回复 <span class="time">05-20</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">520</p></div>
            </div>
          </div>
          <div class="sub-comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源源</p>
                <p class="reply-des">
                  <span>回复：</span>
                  <span class="re-name">源</span>
                  <span>这是回复回复的回复</span>
                  <span class="time">05-21</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">1314</p></div>
            </div>
          </div>
          <div class="more">-----展开60条回复</div>
          <div class="comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源</p>
                <p class="reply-des">这是回复 <span class="time">05-20</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">520</p></div>
            </div>
          </div>
          <div class="sub-comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源源</p>
                <p class="reply-des">
                  <span>回复：</span>
                  <span class="re-name">源</span>
                  <span>这是回复回复的回复</span>
                  <span class="time">05-21</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">1314</p></div>
            </div>
          </div>
          <div class="more">-----展开60条回复</div>
          <div class="comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源</p>
                <p class="reply-des">这是回复 <span class="time">05-20</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">520</p></div>
            </div>
          </div>
          <div class="sub-comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源源</p>
                <p class="reply-des">
                  <span>回复：</span>
                  <span class="re-name">源</span>
                  <span>这是回复回复的回复</span>
                  <span class="time">05-21</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">1314</p></div>
            </div>
          </div>
          <div class="more">-----展开60条回复</div>
          <div class="comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源</p>
                <p class="reply-des">这是回复 <span class="time">05-20</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">520</p></div>
            </div>
          </div>
          <div class="sub-comment-item">
            <div class="user-pic"><img src="../../static/img/4.jpg" alt=""></div>
            <div class="item-info">
              <div class="reply">
                <p class="name">源源</p>
                <p class="reply-des">
                  <span>回复：</span>
                  <span class="re-name">源</span>
                  <span>这是回复回复的回复</span>
                  <span class="time">05-21</span></p>
              </div>
              <div class="zan"><span class="iconfont icon-aixin"></span><p class="dianzanshu">1314</p></div>
            </div>
          </div>
          <div class="more">-----展开60条回复</div>
        </div>
      </div>
      <div class="reply-input">
        <input type="text" placeholder="留下你的精彩评论">
        <span class="emoji">@</span>
        <sapn class="iconfont icon-tubiaozhizuo-"></sapn>
      </div>
    </div>
  </div>
  </transition>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import myHeader from '../../components/header/myHeader'
import InfoBar from './InfoBar'
import RightBar from './RightBar'
export default {
  name:'followVideos',
  data () {
    return {
      transitonLeft:false,
      showComment:false,
      playerOptions : {
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: true, // 导致视频一结束就重新开始。
          preload: 'auto', 
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
              {
                  src: this.$route.query.videourl,  // 路径
                  type: 'video/mp4'  // 类型
              }, 
          ],
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar:false
      },
      playing:true
    }
  },
  methods: {
    play(){
      this.$refs.videoPlayer.player.load();
      this.$refs.videoPlayer.player.play();
      this.playing = true;
    },
    stop(){
      this.$refs.videoPlayer.player.pause();
      this.playing = false;
    },
    toBack(){
      this.$router.push('/follow')
    },
    showComs(){
      this.showComment = true 
    },
    close(){
      this.showComment = false
    },
    pause(){
      if(this.playing){
        this.$refs.videoPlayer.player.pause();
        this.playing = false;
      }else{
        this.$refs.videoPlayer.player.play();
        this.playing = true;
      }
      this.transitonLeft = true
    }
  },
  components: {
    videoPlayer,
    myHeader,
    InfoBar,
    RightBar
  },
  mounted () {
    // console.log(this.$route)
    // this.playOrStop()
  },
  computed: {
    player () {
      return this.$refs.videoPlayer.player
    }
  },
    watch: {
    $route(to, from) {
      console.log(to.path)
      console.log(from.path)
    }
  },
}
</script>
<style>
  .videos{
    position: relative;
  }
  .pause{
    width: 300px;
    height: 650px;
    position: absolute;
    z-index: 999;
  }
  .videos .vjs-default-skin > .video-js .vjs-big-play-button{
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
    display: none;
  }
  .infobar_wrap{
    position: absolute;
    bottom: 55px;
    left: 0;
  }
  .rightbar_wrap{
    position: absolute;
    right: 10px;
    bottom: 50px;
  }
  .up-enter-active, .up-leave-active{
    transition: all .5s;
  }
  .up-enter, .up-leave-to{
    opacity: 1;
    transform: translateY(100%);
  }
  .left-enter-active, .left-leave-active{
    transition: all 5s;
  }
  .left-enter, .left-leave-to{
    opacity: 1;
    transform: translateX(100%);
  }
  .comment-wrap{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 500px;
    width: 100%;
    background: #FFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    z-index: 999;
    padding: 10px 10px;
    box-sizing: border-box;
  }
  .comment-top{
    display: flex;
    align-items: center;
  }
  .number{
    flex: 1;
    text-align: center;
  }
  .close{
    padding-right: 10px;
    font-size: 30px;
    color: #666;
  }
  .comment-body{
    overflow: auto;
    max-height: 450px;
    margin-top: 30px;
  }
  .comment-item{
    display: flex;
    margin-bottom: 5px;
  }
  .user-pic img{
    width: 33px;
    height: 33px;
    border-radius: 50%;
    margin-top: 5px;
  }
  .item-info{
    margin-left: 10px;
    display: flex;
    flex: 1 1 auto;
  }
  .reply{
    width: 90%;
  }
  .reply-des{
    line-height: 24px;
  }
  .name{
    color: #666;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .time{
    color: #ccc;
    margin-left: 10px;
  }
  .zan{
    position: relative;
    padding-top: 5px;
  }
  .zan .iconfont{
    position: absolute;
    right: 10px;
    font-size: 20px;
    color: #ccc;
  }
  .dianzanshu{
    margin-right: 5px;
    margin-top: 20px;
    color: #ccc;
  }
  p{
    margin: 0;
    padding: 0;
  }
  .sub-comment-item{
    display: flex;
    margin-left: 30px;

  }
  .re-name{
    padding: 0 10px;
    color: #666;
  }
  .more{
    margin-left: 33px;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  .reply-input{
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    align-items: center;
    display: flex;
  }
  .reply-input input{
    line-height: 40px;
    width: 70%;
    border: none;
    padding: 0 10px;
  }
  .reply-input .emoji{
    font-size: 30px;
    color: #ccc;
    margin-right: 6%;
  }
  .reply-input .iconfont{
    font-size: 26px;
    color: #ccc;
  }
</style>